<template>
  <div>
    <h2>学生管理</h2>

    <!-- 搜索 -->
    <el-input v-model="searchQuery" placeholder="搜索姓名或学号" style="max-width: 300px; margin-bottom: 20px;" />

    <!-- 表格 -->
    <el-table :data="filteredStudents" border style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="studentId" label="学号"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="class" label="班级"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑对话框 -->
    <el-dialog :title="isEditing ? '编辑学生' : '添加学生'" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="form.studentId"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="form.gender" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.class"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-button type="primary" @click="openAddDialog">添加学生</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      dialogVisible: false,
      isEditing: false,
      form: {
        id: null,
        name: '',
        studentId: '',
        gender: '',
        class: ''
      }
    }
  },
  computed: {
    students() {
      return this.$store.getters.students
    },
    filteredStudents() {
      if (!this.searchQuery) return this.students
      return this.students.filter(
        s =>
          s.name.includes(this.searchQuery) ||
          s.studentId.includes(this.searchQuery)
      )
    }
  },
  methods: {
    openAddDialog() {
      this.isEditing = false
      this.form = { id: null, name: '', studentId: '', gender: '', class: '' }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.isEditing = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    handleDelete(id) {
      this.$confirm('确定删除该学生吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('deleteStudent', id)
        this.$message.success('删除成功')
      })
    },
    handleSubmit() {
      if (this.isEditing) {
        this.$store.dispatch('updateStudent', this.form)
        this.$message.success('更新成功')
      } else {
        this.form.id = Date.now()
        this.$store.dispatch('addStudent', this.form)
        this.$message.success('添加成功')
      }
      this.dialogVisible = false
    }
  }
}
</script>